/*
 * css3 动画 样式文件
 * 实现css3动画 的基本动作 样式
 * 以class方式实现
 * author: yuxiangxiang
 * date: 2015.04.10
 * mailto: 365879415@qq.com
 */

/*
************************************************************************************************************************
@keyframes 规定动画。

目前浏览器都不支持 @keyframes 规则。

Firefox 支持替代的 @-moz-keyframes 规则。

Opera 支持替代的 @-o-keyframes 规则。

Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

定义和用法
通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

语法
@keyframes animationname {keyframes-selector {css-styles;}}

animationname：必需。定义动画的名称。
keyframes-selector：
                    必需。动画时长的百分比。
                    合法的值：
                        0-100%
                        from（与 0% 相同）
                        to（与 100% 相同）

css-styles：必需。一个或多个合法的 CSS 样式属性。

************************************************************************************************************************
animation 属性是一个简写属性，用于设置六个动画属性：

animation-name：规定需要绑定到选择器的 keyframe 名称。。
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function：规定动画的速度曲线。
        linear：动画从头到尾的速度是相同的。
        ease：默认。动画以低速开始，然后加快，在结束前变慢。
        ease-in：动画以低速开始。
        ease-out：动画以低速结束。
        ease-in-out：动画以低速开始和结束。
        cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
animation-delay：规定在动画开始之前的延迟。
        time：可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。
animation-iteration-count：规定动画应该播放的次数。
        n：定义动画播放次数的数值。
        infinite：规定动画应该无限次播放。
animation-direction：规定是否应该轮流反向播放动画。
        normal：默认值。动画应该正常播放。
        alternate：动画应该轮流反向播放。
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

语法
animation: name duration timing-function delay iteration-count direction;
************************************************************************************************************************
animation-fill-mode

定义和用法
animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。

注释：其属性值是由逗号分隔的一个或多个填充模式关键词。

语法
animation-fill-mode : none | forwards | backwards | both;

值：描述
none：不改变默认行为。
forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both：向前和向后填充模式都被应用。
************************************************************************************************************************
*/

/*动画完成后，保留动画效果，配合动画使用*/
.an-util-both {
    animation-fill-mode: both !important;
    -webkit-animation-fill-mode: both !important;
    -moz-animation-fill-mode: both !important;
    -o-animation-fill-mode: both !important;
    -ms-animation-fill-mode: both !important;
}

/*旋转：顺时针 1.5s一圈 0延迟 无限循环*/
.rotation-in {
    animation: rotateIn 1.5s linear infinite;
    -webkit-animation: rotateIn 1.5s linear infinite;
    -moz-animation: rotateIn 1.5s linear infinite;
    -ms-animation: rotateIn 1.5s linear infinite;
    -o-animation: rotateIn 1.5s linear infinite;
}
@keyframes rotateIn{
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}
@-webkit-keyframes rotateIn{
    0% { -webkit-transform: rotate(0deg);}
    100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotateIn{
    0% { -moz-transform: rotate(0deg);}
    100% { -moz-transform: rotate(360deg);}
}
@-ms-keyframes rotateIn{
    0% { -ms-transform: rotate(0deg);}
    100% { -ms-transform: rotate(360deg);}
}
@-o-keyframes rotateIn{
    0% { -o-transform: rotate(0deg);}
    100% { -o-transform: rotate(360deg);}
}

/*旋转：逆时针 12s一圈 0延迟 无限循环*/
.rotation-out {
    animation:rotateOut 12s linear infinite;
    -webkit-animation:rotateOut 12s linear infinite;
    -moz-animation:rotateOut 12s linear infinite;
    -ms-animation:rotateOut 12s linear infinite;
    -o-animation:rotateOut 12s linear infinite;
}
@keyframes rotateOut {
    0% { transform: rotate(360deg);}
    100% { transform: rotate(0deg);}
}
@-webkit-keyframes rotateOut {
    0% { -webkit-transform: rotate(360deg);}
    100% { -webkit-transform: rotate(0deg);}
}

@-moz-keyframes rotateOut {
    0% { -moz-transform: rotate(360deg);}
    100% { -moz-transform: rotate(0deg);}
}
@-ms-keyframes rotateOut {
    0% { -ms-transform: rotate(360deg);}
    100% { -ms-transform: rotate(0deg);}
}
@-o-keyframes rotateOut {
    0% { -o-transform: rotate(360deg);}
    100% { -o-transform: rotate(0deg);}
}


/* 从上向下跳入的效果：0.4s完成 2.8s后执行 */
/*from-top-to-bottom*/
.fttb {
    opacity: 0;
    animation: fttb 0.4s linear 2.8s;
    -webkit-animation: fttb 0.4s linear 2.8s;
    -moz-animation: fttb 0.4s linear 2.8s;
    -ms-animation: fttb 0.4s linear 2.8s;
    -o-animation: fttb 0.4s linear 2.8s;
}
@keyframes fttb {
    0% {
        opacity: 0;
        transform: translateY(-520px);
    }
    50% {
        opacity: 0.9;
        transform: translateY(0px);
    }
    70% {
        opacity: 0.8;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@-webkit-keyframes fttb {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-520px);
    }
    50% {
        opacity: 0.9;
        -webkit-transform: translateY(0px);
    }
    70% {
        opacity: 0.8;
        -webkit-transform: translateY(-20px);
    }
    100% {
        -webkit-transform: translateY(0);
        opacity: 1;
    }
}
@-moz-keyframes fttb {
    0% {
        opacity: 0;
        -moz-transform: translateY(-520px);
    }
    50% {
        opacity: 0.9;
        -moz-transform: translateY(0px);
    }
    70% {
        opacity: 0.8;
        -moz-transform: translateY(-20px);
    }
    100% {
        -moz-transform: translateY(0);
        opacity: 1;
    }
}
@-ms-keyframes fttb {
    0% {
        opacity: 0;
        -ms-transform: translateY(-520px);
    }
    50% {
        opacity: 0.9;
        -ms-transform: translateY(0px);
    }
    70% {
        opacity: 0.8;
        -ms-transform: translateY(-20px);
    }
    100% {
        -ms-transform: translateY(0);
        opacity: 1;
    }
}
@-o-keyframes fttb {
    0% {
        opacity: 0;
        -o-transform: translateY(-520px);
    }
    50% {
        opacity: 0.9;
        -o-transform: translateY(0px);
    }
    70% {
        opacity: 0.8;
        -o-transform: translateY(-20px);
    }
    100% {
        -o-transform: translateY(0);
        opacity: 1;
    }
}

/* 从下向上的提示箭头：2s 循环 */
.arrowUp {
    animation: arrowUp 1.2s ease-in-out infinite;
    -webkit-animation: arrowUp 1.2s ease-in-out infinite;
    -moz-animation: arrowUp 1.2s ease-in-out infinite;
    -ms-animation: arrowUp 1.2s ease-in-out infinite;
    -o-animation: arrowUp 1.2s ease-in-out infinite;
}
@keyframes arrowUp {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    50% {
        opacity: 1;
        transform: translateY(-5px);
    }
    100% {
        opacity: 0;
        transform: translateY(-15px);
    }
}
@-webkit-keyframes arrowUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
    }
    50% {
        opacity: 1;
        -webkit-transform: translateY(-5px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-15px);
    }
}
@-moz-keyframes arrowUp {
    0% {
        opacity: 0;
        -moz-transform: translateY(10px);
    }
    50% {
        opacity: 1;
        -moz-transform: translateY(-5px);
    }
    100% {
        opacity: 0;
        -moz-transform: translateY(-15px);
    }
}
@-ms-keyframes arrowUp {
    0% {
        opacity: 0;
        -ms-transform: translateY(10px);
    }
    50% {
        opacity: 1;
        -ms-transform: translateY(-5px);
    }
    100% {
        opacity: 0;
        -ms-transform: translateY(-15px);
    }
}
@-o-keyframes arrowUp {
    0% {
        opacity: 0;
        -o-transform: translateY(10px);
    }
    50% {
        opacity: 1;
        -o-transform: translateY(-5px);
    }
    100% {
        opacity: 0;
        -o-transform: translateY(-15px);
    }
}



/*顺时针旋转45度：持续2s 不延迟 保留旋转后的效果 添加 类an-util-both*/
.rotata45 {
    animation: xz45 2s linear 0s;
    -webkit-animation: xz45 2s linear 0s;
    -moz-animation: xz45 2s linear 0s;
    -ms-animation: xz45 2s linear 0s;
    -o-animation: xz45 2s linear 0s;
}
@keyframes xz45 {
    0% {transform: rotate(0deg);}
    11% {transform: rotate(5deg);}
    22% {transform: rotate(10deg);}
    33% {transform: rotate(15deg);}
    44% {transform: rotate(20deg);}
    55% {transform: rotate(25deg);}
    66% {transform: rotate(30deg);}
    77% {transform: rotate(35deg);}
    88% {transform: rotate(40deg);}
    100% {transform: rotate(45deg);}
}
@-webkit-keyframes xz45 {
     0%   {-webkit-transform: rotate(0deg);}
     11%   {-webkit-transform: rotate(5deg);}
     22%  {-webkit-transform: rotate(10deg);}
     33%  {-webkit-transform: rotate(15deg);}
     44%  {-webkit-transform: rotate(20deg);}
     55% {-webkit-transform: rotate(25deg);}
     66% {-webkit-transform: rotate(30deg);}
     77% {-webkit-transform: rotate(35deg);}
     88% {-webkit-transform: rotate(40deg);}
     100% {-webkit-transform: rotate(45deg);}
 }
@-moz-keyframes xz45 {
    0%   {-moz-transform: rotate(0deg);}
    11%   {-moz-transform: rotate(5deg);}
    22%  {-moz-transform: rotate(10deg);}
    33%  {-moz-transform: rotate(15deg);}
    44%  {-moz-transform: rotate(20deg);}
    55% {-moz-transform: rotate(25deg);}
    66% {-moz-transform: rotate(30deg);}
    77% {-moz-transform: rotate(35deg);}
    88% {-moz-transform: rotate(40deg);}
    100% {-moz-transform: rotate(45deg);}
}
@-ms-keyframes xz45 {
    0%   {-ms-transform: rotate(0deg);}
    11%   {-ms-transform: rotate(5deg);}
    22%  {-ms-transform: rotate(10deg);}
    33%  {-ms-transform: rotate(15deg);}
    44%  {-ms-transform: rotate(20deg);}
    55% {-ms-transform: rotate(25deg);}
    66% {-ms-transform: rotate(30deg);}
    77% {-ms-transform: rotate(35deg);}
    88% {-ms-transform: rotate(40deg);}
    100% {-ms-transform: rotate(45deg);}
}
@-o-keyframes xz45 {
    0%   {-o-transform: rotate(0deg);}
    11%   {-o-transform: rotate(5deg);}
    22%  {-o-transform: rotate(10deg);}
    33%  {-o-transform: rotate(15deg);}
    44%  {-o-transform: rotate(20deg);}
    55% {-o-transform: rotate(25deg);}
    66% {-o-transform: rotate(30deg);}
    77% {-o-transform: rotate(35deg);}
    88% {-o-transform: rotate(40deg);}
    100% {-o-transform: rotate(45deg);}
}

/*逆时针旋转回0度*/
.rotata-45 {
    animation: xz-45 2s linear 0s;
    -webkit-animation: xz-45 2s linear 0s;
    -moz-animation: xz-45 2s linear 0s;
    -ms-animation: xz-45 2s linear 0s;
    -o-animation: xz-45 2s linear 0s;
}
@keyframes xz-45 {
    0%   {transform: rotate(45deg);}
    11%   {transform: rotate(40deg);}
    22%  {transform: rotate(35deg);}
    33%  {transform: rotate(30deg);}
    44%  {transform: rotate(25deg);}
    55% {transform: rotate(20deg);}
    66% {transform: rotate(15deg);}
    77% {transform: rotate(10deg);}
    88% {transform: rotate(5deg);}
    100% {transform: rotate(0deg);}
}
@-webkit-keyframes xz-45 {
    0%   {-webkit-transform: rotate(45deg);}
    11%   {-webkit-transform: rotate(40deg);}
    22%  {-webkit-transform: rotate(35deg);}
    33%  {-webkit-transform: rotate(30deg);}
    44%  {-webkit-transform: rotate(25deg);}
    55% {-webkit-transform: rotate(20deg);}
    66% {-webkit-transform: rotate(15deg);}
    77% {-webkit-transform: rotate(10deg);}
    88% {-webkit-transform: rotate(5deg);}
    100% {-webkit-transform: rotate(0deg);}
}
@-moz-keyframes xz-45 {
    0%   {-moz-transform: rotate(45deg);}
    11%   {-moz-transform: rotate(40deg);}
    22%  {-moz-transform: rotate(35deg);}
    33%  {-moz-transform: rotate(30deg);}
    44%  {-moz-transform: rotate(25deg);}
    55% {-moz-transform: rotate(20deg);}
    66% {-moz-transform: rotate(15deg);}
    77% {-moz-transform: rotate(10deg);}
    88% {-moz-transform: rotate(5deg);}
    100% {-moz-transform: rotate(0deg);}
}
@-ms-keyframes xz-45 {
    0%   {-ms-transform: rotate(45deg);}
    11%   {-ms-transform: rotate(40deg);}
    22%  {-ms-transform: rotate(35deg);}
    33%  {-ms-transform: rotate(30deg);}
    44%  {-ms-transform: rotate(25deg);}
    55% {-ms-transform: rotate(20deg);}
    66% {-ms-transform: rotate(15deg);}
    77% {-ms-transform: rotate(10deg);}
    88% {-ms-transform: rotate(5deg);}
    100% {-ms-transform: rotate(0deg);}
}
@-o-keyframes xz-45 {
    0%   {-o-transform: rotate(45deg);}
    11%   {-o-transform: rotate(40deg);}
    22%  {-o-transform: rotate(35deg);}
    33%  {-o-transform: rotate(30deg);}
    44%  {-o-transform: rotate(25deg);}
    55% {-o-transform: rotate(20deg);}
    66% {-o-transform: rotate(15deg);}
    77% {-o-transform: rotate(10deg);}
    88% {-o-transform: rotate(5deg);}
    100% {-o-transform: rotate(0deg);}
}

/*从左边滑动过来的 +animation-fill-mode: both*/
.ani_left {
    animation:aniLeft 1s ease 0s;
    -moz-animation:aniLeft 1s ease 0s;
    -moz-animatio:aniLeft 1s ease 0s;
    -o-animation:aniLeft 1s ease 0s;
    -ms-animatio:aniLeft 1s ease 0s;
}
.ani_left1 {
    animation:aniLeft 1s ease 0.6s;
    -moz-animation:aniLeft 1s ease 0.6s;
    -moz-animatio:aniLeft 1s ease 0.6s;
    -o-animation:aniLeft 1s ease 0.6s;
    -ms-animatio:aniLeft 1s ease 0.6s;
}
.ani_left2 {
    animation:aniLeft 1s ease 1.2s;
    -moz-animation:aniLeft 1s ease 1.2s;
    -moz-animatio:aniLeft 1s ease 1.2s;
    -o-animation:aniLeft 1s ease 1.2s;
    -ms-animatio:aniLeft 1s ease 1.2s;
}
.ani_left3 {
    animation:aniLeft 1s ease 2s;
    -moz-animation:aniLeft 1s ease 2s;
    -moz-animatio:aniLeft 1s ease 2s;
    -o-animation:aniLeft 1s ease 2s;
    -ms-animatio:aniLeft 1s ease 2s;
}
@-webkit-keyframes aniLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-300px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@-moz-keyframes aniLeft {
    0% {
        opacity: 0;
        -moz-transform: translateX(-300px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}
@-o-keyframes aniLeft {
    0% {
        opacity: 0;
        -o-transform: translateX(-300px);
    }
    100% {
        opacity: 1;
        -o-transform: translateX(0);
    }
}
@-ms-keyframes aniLeft {
    0% {
        opacity: 0;
        -ms-transform: translateX(-300px);
    }
    100% {
        opacity: 1;
        -ms-transform: translateX(0);
    }
}

/*从右边滑动过来的 +animation-fill-mode: both*/
.ani_right {
    animation:aniRight 1s ease 0s;
    -webkit-animation:aniRight 1s ease 0s;
    -moz-animatio:aniRight 1s ease 0s;
    -o-animation:aniRight 1s ease 0s;
    -ms-animation:aniRight 1s ease 0s;
}
.ani_right1 {
    animation:aniRight 1s ease 0.6s;
    -webkit-animation:aniRight 1s ease 0.6s;
    -moz-animatio:aniRight 1s ease 0.6s;
    -o-animation:aniRight 1s ease 0.6s;
    -ms-animation:aniRight 1s ease 0.6s;
}
.ani_right2 {
    animation:aniRight 1s ease 1.2s;
    -webkit-animation:aniRight 1s ease 1.2s;
    -moz-animatio:aniRight 1s ease 1.2s;
    -o-animation:aniRight 1s ease 1.2s;
    -ms-animation:aniRight 1s ease 1.2s;
}
.ani_right3 {
    animation:aniRight 1s ease 2s;
    -webkit-animation:aniRight 1s ease 2s;
    -moz-animatio:aniRight 1s ease 2s;
    -o-animation:aniRight 1s ease 2s;
    -ms-animation:aniRight 1s ease 2s;
}
@-webkit-keyframes aniRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(300px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@-moz-keyframes aniRight {
    0% {
        opacity: 0;
        -moz-transform: translateX(300px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}
@-o-keyframes aniRight {
    0% {
        opacity: 0;
        -o-transform: translateX(300px);
    }
    100% {
        opacity: 1;
        -o-transform: translateX(0);
    }
}
@-ms-keyframes aniRight {
    0% {
        opacity: 0;
        -ms-transform: translateX(300px);
    }
    100% {
        opacity: 1;
        -ms-transform: translateX(0);
    }
}

/*从上边滑动过来的 +animation-fill-mode: both*/
.ani_top {
    animation: aniTop 1s linear 0s;
    -webkit-animation: aniTop 1s linear 0s;
    -moz-animation: aniTop 1s linear 0s;
    -o-animation: aniTop 1s linear 0s;
    -ms-animation: aniTop 1s linear 0s;

}
@-webkit-keyframes aniTop {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}
@-moz-keyframes aniTop {
    0% {
        opacity: 0;
        -moz-transform: translateY(-100px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}
@-o-keyframes aniTop {
    0% {
        opacity: 0;
        -o-transform: translateY(-100px);
    }
    100% {
        opacity: 1;
        -o-transform: translateY(0);
    }
}
@-ms-keyframes aniTop {
    0% {
        opacity: 0;
        -ms-transform: translateY(-100px);
    }
    100% {
        opacity: 1;
        -ms-transform: translateY(0);
    }
}


/*从下边滑动过来的 +animation-fill-mode: both*/
.ani_bottom {
    animation: aniBottom 1s linear 0s;
    -webkit-animation: aniBottom 1s linear 0s;
    -moz-animation: aniBottom 1s linear 0s;
    -o-animation: aniBottom 1s linear 0s;
}
@-webkit-keyframes aniBottom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}
/*图片从小变大*/
.ani_scale {
    -webkit-animation-name: aniScale;
    -moz-animation-name: aniScale;
    -o-animation-name: aniScale;
    animation-name: aniScale;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes aniScale {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.5) translate(-100px,-100PX);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1)translate(0,0);
    }
}
/*图片翻转放大*/
.ani_rotate{
    -webkit-animation-name: aniRotate;
    -moz-animation-name: aniRotate;
    -o-animation-name: aniRotate;
    animation-name: aniRotate;
    -webkit-animation-duration:2s;
    -moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes aniRotate {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.5)  rotateY(0deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1) rotateY(360deg);
    }
}

/*图片渐隐渐现*/
.ani_opact {
    -webkit-animation-name: aniOpact;
    -moz-animation-name: aniOpact;
    -o-animation-name: aniOpact;
    animation-name: aniOpact;
    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    -o-animation-duration: 1.5s;
    animation-duration: 1.5s;
}
@-webkit-keyframes aniOpact {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}
/*图片渐现*/
.ani_show {
    -webkit-animation-name: aniShow;
    -moz-animation-name: aniShow;
    -o-animation-name: aniShow;
    animation-name: aniShow;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
}
@-webkit-keyframes aniShow {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/*高度变化*/
.wz31_22{
    -webkit-animation-name: aniHeight;
    -moz-animation-name: aniHeight;
    -o-animation-name: aniHeight;
    animation-name: aniHeight;
    -webkit-animation-duration: 3s;
    -moz-animation-duration: 3s;
    -o-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes aniHeight {
    0% {
        height:0;
    }
    100% {
        height:20%;
    }
}

/*循环小到大*/
.ani_big{
    animation:tonext 1s infinite  ease-in-out;
    -webkit-animation:tonext 1s infinite  ease-in-out;
}
@-webkit-keyframes tonext {
    0% {-webkit-transform:scale(0.9,0.9);}
    100% {-webkit-transform:scale(1,1);}
}
@-moz-keyframes tonext {
    0% {-moz-transform:scale(0.9,0.9);}
    100% {-moz-transform:scale(1,1);}
}
@keyframes tonext {
    0% {transform:scale(0.9,0.9);}
    100% {transform:scale(1,1);}
}

/*由大变小*/
.ani_bigN{
    animation:aniBigN 1.5s   ease-in-out;
    -webkit-animation:aniBigN 1.5s   ease-in-out;
}
@-webkit-keyframes aniBigN {
    0% {-webkit-transform:scale(1.6,1.6);}
    100% {-webkit-transform:scale(1,1);}
}
@-moz-keyframes aniBigN {
    0% {-moz-transform:scale(1.6,1.6);}
    100% {-moz-transform:scale(1,1);}
}
@keyframes aniBigN {
    0% {transform:scale(1.6,1.6);}
    100% {transform:scale(1,1);}
}
